<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column fast-setting")
            div(class="flex-column-item h3")
              div(class="flex-row")
                div(class="flex-row-item flex-2")
                    span(:class="{'active-block': state=='hour'}") {{currentRange.name}}-{{nextHour}}
                div(class="flex-row-item flex-2 right")
                    span(class="range-amount",:class="{'active-block': state=='amount'}") {{currentRange.value}}
                    span u/h
                div(class="flex-row-item right")
                    plan-icon(:plan="planUsing")
            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item")
                    span 基础总量:
                div(class="flex-row-item center")
                    span() {{totalAmount}}u

            div(class="flex-column-item flex-2")
                rate-chart(v-model="rateValues",:active-index="currentRangeIndex")

</template>

<script>
    export default {
  data() {
    return {
      increment: 0.1,
      max: 5,
      min: 0,
      basicRate: window.rate.basicRate,
      currentRange: null,
      currentRangeIndex: 0,
      chart: null,
      planUsing: window.rate.planUsing,
      state: 'hour', // hour
    };
  },
  computed: {
    totalAmount() {
      let total = 0;
      this.basicRate.value.forEach(
        rate => (total = (total * 10 + rate.value * 10) / 10)
      );
      return total;
    },
    nextHour() {
      return this.currentRangeIndex == this.basicRate.value.length - 1
        ? "24"
        : this.basicRate.value[this.currentRangeIndex + 1].name;
    },
      rateValues(){
          return this.basicRate.value.map(t=> {return t.value});
      }
  },

  methods: {
    up() {
      this.currentRange.value =
        this.currentRange.value == this.max
          ? this.min
          : (this.currentRange.value * 10 + this.increment * 10) / 10;

      this.basicRate.value[this.currentRangeIndex].value = this.currentRange.value;

      this.state = 'amount'
    },
    down() {
      this.currentRange.value =
        this.currentRange.value == this.min
          ? this.max
          : (this.currentRange.value * 10 - this.increment * 10) / 10;
      this.basicRate.value[this.currentRangeIndex].value = this.currentRange.value;

      this.state = 'amount'
    },

    back() {
        window.rate.basicRate.value = this.basicRate.value; // 修改配置
        window.rate.records.push(
            Object.assign(
                {
                    type: window.advance.medicalCat.value,
                    createTime: new Date()
                },
                window.rate.basicRate
            )
        );
      this.$router.push("/base-rate?index=0");
    },
    yes() {
      if (this.currentRangeIndex === this.basicRate.value.length - 1) {
        this.currentRangeIndex = 0;
      } else {
        this.currentRangeIndex += 1;
      }
      this.currentRange = this.basicRate.value[this.currentRangeIndex];

      this.state = 'hour'
    },
  },
  created() {
    this.currentRange = this.basicRate.value[0];
    this.currentRangeIndex = 0;
  }

    };
</script>

<style lang="less">
</style>
